import React, { useState, useEffect, useRef } from 'react'; // 这行必须写，不然报错，可能是eslint搞事情。
import {
  Row,
  Input,
  Form,
  DatePicker,
  Modal,
  message,
  TreeSelect,
  Radio,
  Select,
} from 'antd';
const { confirm } = Modal;
const { RangePicker } = DatePicker;
const { TreeNode } = TreeSelect;
const { Option } = Select;
const { TextArea } = Input;
import { updateUser,getUser } from '@/api/system/user.js';
const EditUserModalForm = ({
  treeData,
  visible,
  onCancel,
  oninitList,
  onhideUserModal,
  userId
}) => {
  const [form] = Form.useForm();
  const [selectTreeValue, setSelectTreeValue] = useState(null);
  const [valueflag, setvalueFlag] = useState(false);

  const [editvalue, setEditvalue] = useState({});

  useResetFormOnCloseModal({
    form,
    visible,
  });

  useEffect(() => {
    getUserInfo()
  }, []);

  //点击添加用户
  const onOk = () => {
    form.submit();
  };

  const onChange = value => {
    setSelectTreeValue(selectTreeValue);
  };


  const getUserInfo=()=>{
    getUser(userId).then(res=>{
      if(res.code==200){
          setEditvalue({
            ...res.data,
            postIds:res.postIds,
            roleIds:res.roleIds,
          })
          setvalueFlag(true)
      }
    })
  }

  //表单提交方法
  const onFinish = values => {
    values.userId=userId
    updateUser(values).then(res => {
      if (res.code == 200) {
        message.success('修改成功');
        onhideUserModal();
        oninitList();
      } else if (res.code == 500) {
        message.warning(res.msg);
      }
    });
  };

  return (
    <Modal
      title="修改用户"
      visible={visible}
      onOk={onOk}
      className="system-user-add-modal"
      onCancel={onCancel}
      cancelText="取消"
      okText="确定"
      style={{
        padding: '30px 20px',
        color: '#606266',
        fontSize: '14px',
        wordBreak: 'break-all',
      }}
    >
      {editvalue !== null && valueflag && (
        <Form
          form={form}
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            flexWrap: 'wrap',
          }}
          layout="vertical"
          name="userForm"
          labelAlign="right"
          layout="horizontal"
          className="addForm"
          onFinish={onFinish}
          initialValues={editvalue}
        >
            <Form.Item
              name="nickName"
              label="用户昵称"
              rules={[{ required: true, message: '用户昵称不能为空' }]}
            >
              <Input />
            </Form.Item>
          {
            <Form.Item
              name="userName"
              label="用户名称"
              rules={[{ required: true, message: '用户名称不能为空' }]}
            >
              <Input />
            </Form.Item>
          }

            <Form.Item
              name="deptId"
              label="归属部门"
              rules={[{ required: true, message: '归属部门不能为空' }]}
            >
              {treeData.length && (
                <TreeSelect
                  style={{ width: '174px' }}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  treeData={treeData}
                  placeholder="请选择归属部门"
                  // onChange={onChange}
                />
              )}
            </Form.Item>
            <Form.Item
              name="phonenumber"
              label="手机号码"
              rules={[
                { required: true, message: '手机号码不能为空' },
                {
                  pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                  message: '请输入正确的手机号码',
                  max: 11,
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="email"
              label="邮箱"
              rules={[{ required: true, message: '邮箱地址不能为空' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item name="sex" label="用户性别" className="xb">
              <Select style={{ width: 174 }}>
                <Option value={'0'}>男</Option>
                <Option value={'1'}>女</Option>
                <Option value={'2'}>未知</Option>
              </Select>
            </Form.Item>

            <Form.Item name="status" label="状态" className="zt">
              <Radio.Group>
                <Radio value={'0'}>正常</Radio>
                <Radio value={'1'}>停用</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item name="postIds" label="岗位:" className="gw">
              <Select  style={{ width: 174 }} mode="multiple">
                <Option value={1}>董事长</Option>
                <Option value={2}>项目经理</Option>
                <Option value={3}>人力资源</Option>
                <Option value={4}>普通员工</Option>
              </Select>
            </Form.Item>

            <Form.Item name="roleIds" label="角色">
             <Select style={{ width: 174 }} mode="multiple">
               <Option value={2}>普通角色</Option>
              </Select>
            </Form.Item>
            <Form.Item name="remark" label="备注" style={{ width: 550 }}>
              <TextArea rows={4} />
            </Form.Item>
        </Form>
      )}
    </Modal>
  );
};
// reset form fields when modal is form, closed
const useResetFormOnCloseModal = ({ form, visible }) => {
  const prevVisibleRef = useRef();
  useEffect(() => {
    prevVisibleRef.current = visible;
  }, [visible]);
  const prevVisible = prevVisibleRef.current;
  useEffect(() => {
    if (!visible && prevVisible) {
      form.resetFields();
    }
  }, [visible]);
};

export default EditUserModalForm;
